<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='720px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{viewForm.name?viewForm.name:'预览策略'}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="view_title">应用对象/预警提醒人</div>
                <el-table :data="viewForm.adverData" class="com_table" max-height="320px" style="margin-top:20px">
                    <el-table-column prop="advertiser_id" label="广告账户 ID" width="170">
                    </el-table-column>
                    <el-table-column prop="name" label="广告账户名称">
                    </el-table-column>
                    <el-table-column prop="user_id" label="预警提醒人" width="185">
                        <template slot-scope="scope">
                            {{getRemindName(scope.row.user_id)?getRemindName(scope.row.user_id):'--'}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="view_title mt_12">触发规则</div>
                <div class="flexbox flexcenter view_rules">
                    <div class="vw_left">关停计划</div>
                    <div class="vw_right flex">
                        <template v-for="item in viewForm.rulesDta">
                            <template v-if="item.value!=5">
                                <template v-if="item.value==6||item.value==8">
                                    <p :key="item.value">满足{{item.start_text}}<span class="blue_tips">{{item.num}}</span> 或 满足{{item.start_text2}}<span class="blue_tips">{{item.num2}}</span>, 则触发<span class="blue_tips">关停计划</span>操作</p>
                                </template>
                                <p :key="item.value" v-else>满足{{item.start_text}}<span class="blue_tips">{{item.num}}</span>, 则触发<span class="blue_tips">关停计划</span>操作</p>
                            </template>
                        </template>
                    </div>
                </div>
                <div class="flexbox flexcenter view_rules" v-if="isShowPlan(this.viewForm.rulesDta)">
                    <div class="vw_left">预警通知</div>
                    <div class="vw_right flex">
                        <template v-for="item in viewForm.rulesDta">
                            <p :key="item.value" v-if="item.value==5" class="text_line">满足{{item.start_text}}￥<span class="blue_tips">{{item.num}}</span>, 则触发<span class="blue_tips">预警通知</span>操作</p>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            viewForm: {},
            remindList: [],
            condition: [
                {
                    title: "直播间下单/直播间成交出价最大值",
                    start_text: "【直播间下单/直播间成交出价最大值】大于",
                    end_text: "",
                    value: 1,
                    num: "",
                },
                {
                    title: "支付roi最小值",
                    start_text: "【支付roi最小值】低于",
                    end_text: "",
                    value: 2,
                    num: "",
                },
                {
                    title: "商品购买出价最大值",
                    start_text: "【商品购买出价最大值】大于￥",
                    end_text: "",
                    value: 3,
                    num: "",
                },
                {
                    title: "放量投放中的预算最大值",
                    start_text: "【放量投放中的预算最大值】大于",
                    end_text: "",
                    value: 4,
                    num: "",
                },
                {
                    title: "7日总支付ROI",
                    start_text: "转化目标为7日总支付roi时预算最大值",
                    start_text2: "转化目标为7日总支付roi时roi最小值",
                    end_text: "",
                    value: 6,
                    num: "",
                    num2: "",
                },
                {
                    title: "直播间结算",
                    start_text: "转化目标为直播间结算时预算最大值",
                    start_text2: "转化目标为直播间结算时roi最小值",
                    end_text: "",
                    value: 8,
                    num: "",
                    num2: "",
                },
                {
                    title: "账号余额监控时段变化最大值",
                    start_text: "【账号余额监控时段变化最大值】超过",
                    end_text: "",
                    value: 5,
                    num: "",
                },
            ],
        };
    },
    created() {
        this.getRemindList();
    },
    methods: {
        resetForm() {
            this.dialogVisible = false;
        },

        // 获取提醒人
        async getRemindList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/adminapi/company/hzOptimizerList"
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.remindList = res.data;
            }
        },

        // getConditionText(value){
        //     let text =''
        //     for(let i in value){
        //         if(value[i].value !=5){
        //             text+=`${value[i].start_text}<span class="blue_tips">${value[i].num}</span>${value[i].end_text},`
        //         }
        //     }
        //     text = text+`则触发<span class="blue_tips">关停计划</span>操作`
        //     return text
        // },

        // getWarnText(value){
        //     let text =''
        //     for(let i in value){
        //         if(value[i].value ==5){
        //             this.is_show2 = true
        //             text+=`${value[i].start_text}<span class="blue_tips">￥${value[i].num}</span>${value[i].end_text},`
        //         }
        //     }
        //     text = text+`则触发<span class="blue_tips">预警通知</span>操作`
        //     return text
        // },

        getRemindName(row) {
            let arr = [];
            for (let i in row) {
                for (let a in this.remindList) {
                    if (row[i] == this.remindList[a].id) {
                        arr.push(this.remindList[a].nickname);
                    }
                }
            }
            return arr.toString();
        },

        isShowPlan(val) {
            let is_show = false;
            for (let i in val) {
                if (val[i].value == 5) {
                    is_show = true;
                }
            }
            return is_show;
        },
    },
    components: {},
};
</script>


<style scoped>
.view_title {
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
}
.mt_12 {
    margin-top: 20px;
}
.vw_left {
    width: 100px;
    font-size: 14px;
    color: #616c85;
    flex-shrink: 0;
}
.vw_right {
    font-size: 14px;
    line-height: 20px;
}
.view_rules {
    padding: 12px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
}
.blue_tips {
    color: #4475ff;
}
.bind_rules {
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
    padding: 6px 12px;
}
.bind_item {
    padding: 10px 0;
}
.vw_trigger {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
    line-height: 20px;
    margin-bottom: 12px;
}
.vw_trigger:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.text_line {
    line-height: 30px;
}
</style>

